<template>
  <div class="pricing-game">
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>💰 价格策略模拟</h1>
          <p>制定最优定价策略，实现利润最大化</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">第 {{ currentMonth }}/12 月</el-tag>
          <el-tag type="warning" size="large">总利润: ${{ totalProfit }}K</el-tag>
          <el-tag type="danger" size="large">市场份额: {{ marketShare }}%</el-tag>
        </div>
      </div>
    </div>

    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><PriceTag /></el-icon>
          <h2>价格策略模拟</h2>
          <p>你将担任定价策略师，为产品制定合理的价格策略</p>
          <div class="game-rules">
            <h3>游戏规则</h3>
            <div class="rules-content">
              <div class="rule-section">
                <h4>📊 市场环境</h4>
                <ul>
                  <li>竞争对手定价会影响你的市场份额</li>
                  <li>成本会随着市场变化而波动</li>
                  <li>客户对价格敏感度不同</li>
                  <li>季节性因素会影响需求</li>
                </ul>
              </div>
              <div class="rule-section">
                <h4>💡 定价策略</h4>
                <ul>
                  <li>成本加成定价：基于成本加利润</li>
                  <li>竞争定价：参考竞争对手</li>
                  <li>价值定价：基于客户感知价值</li>
                  <li>动态定价：根据市场实时调整</li>
                </ul>
              </div>
              <div class="rule-section">
                <h4>🎯 游戏目标</h4>
                <ul>
                  <li>12个月内实现利润最大化</li>
                  <li>保持合理的市场份额</li>
                  <li>平衡价格和销量</li>
                  <li>应对竞争对手的价格战</li>
                </ul>
              </div>
            </div>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始模拟
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-row :gutter="20">
          <!-- 左侧：市场信息 -->
          <el-col :span="8">
            <el-card class="market-info">
              <template #header>
                <h3>📊 市场信息</h3>
              </template>

              <div class="info-section">
                <h4>当前市场状况</h4>
                <div class="market-status">
                  <div class="status-item">
                    <span class="label">市场需求</span>
                    <el-tag :type="getDemandType()">{{ marketDemand }}</el-tag>
                  </div>
                  <div class="status-item">
                    <span class="label">竞争激烈度</span>
                    <el-progress 
                      :percentage="competitionLevel" 
                      :color="getCompetitionColor()"
                      :show-text="false"
                    />
                    <span class="value">{{ competitionLevel }}%</span>
                  </div>
                  <div class="status-item">
                    <span class="label">客户价格敏感度</span>
                    <el-progress 
                      :percentage="priceSensitivity" 
                      color="#e6a23c"
                      :show-text="false"
                    />
                    <span class="value">{{ priceSensitivity }}%</span>
                  </div>
                </div>
              </div>

              <div class="info-section">
                <h4>竞争对手价格</h4>
                <div class="competitors">
                  <div 
                    v-for="competitor in competitors" 
                    :key="competitor.name"
                    class="competitor-item"
                  >
                    <div class="competitor-header">
                      <span class="name">{{ competitor.name }}</span>
                      <el-tag size="small" :type="getPricePositionType(competitor.price)">
                        ${{ competitor.price }}
                      </el-tag>
                    </div>
                    <div class="competitor-info">
                      <span class="market">市场份额: {{ competitor.share }}%</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="info-section">
                <h4>成本信息</h4>
                <div class="cost-info">
                  <div class="cost-item">
                    <span>单位成本</span>
                    <span class="value">${{ unitCost }}</span>
                  </div>
                  <div class="cost-item">
                    <span>固定成本</span>
                    <span class="value">${{ fixedCost }}K/月</span>
                  </div>
                  <div class="cost-item">
                    <span>建议最低价</span>
                    <span class="value highlight">${{ minPrice }}</span>
                  </div>
                </div>
              </div>

              <div class="info-section">
                <h4>历史数据</h4>
                <div class="history-chart">
                  <div 
                    v-for="(data, index) in priceHistory.slice(-6)" 
                    :key="index"
                    class="history-bar"
                  >
                    <div class="bar-label">M{{ data.month }}</div>
                    <div 
                      class="bar-fill" 
                      :style="{ height: (data.profit / 100) + '%', background: data.profit > 0 ? '#67c23a' : '#f56c6c' }"
                    ></div>
                    <div class="bar-value">${{ data.profit }}K</div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 中间：定价决策 -->
          <el-col :span="10">
            <el-card class="pricing-decision">
              <template #header>
                <h3>💰 第 {{ currentMonth }} 月定价决策</h3>
              </template>

              <div class="current-situation">
                <el-alert
                  :title="currentEvent.title"
                  :type="currentEvent.type"
                  :description="currentEvent.description"
                  show-icon
                  :closable="false"
                />
              </div>

              <div class="pricing-form">
                <h4>设定产品价格</h4>
                <div class="price-input-section">
                  <el-input-number
                    v-model="currentPrice"
                    :min="minPrice"
                    :max="200"
                    :step="5"
                    size="large"
                    class="price-input"
                  />
                  <span class="price-unit">美元</span>
                </div>

                <div class="price-analysis">
                  <div class="analysis-item">
                    <span class="label">成本加成</span>
                    <span class="value" :class="getMarkupClass()">
                      {{ ((currentPrice - unitCost) / unitCost * 100).toFixed(1) }}%
                    </span>
                  </div>
                  <div class="analysis-item">
                    <span class="label">vs 市场平均价</span>
                    <span class="value" :class="getCompetitivenessClass()">
                      {{ currentPrice > marketAvgPrice ? '+' : '' }}{{ (currentPrice - marketAvgPrice).toFixed(1) }}
                    </span>
                  </div>
                  <div class="analysis-item">
                    <span class="label">价格定位</span>
                    <el-tag :type="getPricePositionType(currentPrice)">
                      {{ getPricePosition() }}
                    </el-tag>
                  </div>
                </div>

                <div class="strategy-suggestions">
                  <h4>定价策略建议</h4>
                  <div class="suggestion-list">
                    <div 
                      v-for="strategy in pricingStrategies" 
                      :key="strategy.name"
                      class="strategy-card"
                      :class="{ selected: selectedStrategy === strategy.name }"
                      @click="applyStrategy(strategy)"
                    >
                      <div class="strategy-header">
                        <el-icon><component :is="strategy.icon" /></el-icon>
                        <strong>{{ strategy.name }}</strong>
                      </div>
                      <p>{{ strategy.description }}</p>
                      <div class="strategy-price">
                        建议价格: <strong>${{ strategy.price }}</strong>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="prediction">
                  <h4>📈 预期结果</h4>
                  <div class="prediction-grid">
                    <div class="prediction-item">
                      <div class="prediction-label">预计销量</div>
                      <div class="prediction-value">{{ predictedSales }}件</div>
                    </div>
                    <div class="prediction-item">
                      <div class="prediction-label">预计收入</div>
                      <div class="prediction-value">${{ predictedRevenue }}K</div>
                    </div>
                    <div class="prediction-item">
                      <div class="prediction-label">预计利润</div>
                      <div class="prediction-value" :class="predictedProfit > 0 ? 'positive' : 'negative'">
                        ${{ predictedProfit }}K
                      </div>
                    </div>
                    <div class="prediction-item">
                      <div class="prediction-label">市场份额变化</div>
                      <div class="prediction-value" :class="predictedShareChange > 0 ? 'positive' : 'negative'">
                        {{ predictedShareChange > 0 ? '+' : '' }}{{ predictedShareChange }}%
                      </div>
                    </div>
                  </div>
                </div>

                <div class="action-buttons">
                  <el-button 
                    type="primary" 
                    size="large"
                    @click="confirmPrice"
                  >
                    确认定价
                  </el-button>
                  <el-button @click="showMarketResearch">市场调研</el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：业绩追踪 -->
          <el-col :span="6">
            <el-card class="performance-panel">
              <template #header>
                <h3>📈 业绩追踪</h3>
              </template>

              <div class="kpi-section">
                <div class="kpi-item">
                  <div class="kpi-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
                    <el-icon><Money /></el-icon>
                  </div>
                  <div class="kpi-content">
                    <div class="kpi-label">总利润</div>
                    <div class="kpi-value">${{ totalProfit }}K</div>
                    <div class="kpi-change" :class="monthlyProfit > 0 ? 'positive' : 'negative'">
                      本月: ${{ monthlyProfit }}K
                    </div>
                  </div>
                </div>

                <div class="kpi-item">
                  <div class="kpi-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
                    <el-icon><TrendCharts /></el-icon>
                  </div>
                  <div class="kpi-content">
                    <div class="kpi-label">市场份额</div>
                    <div class="kpi-value">{{ marketShare }}%</div>
                    <div class="kpi-change">
                      排名: {{ marketRank }}
                    </div>
                  </div>
                </div>

                <div class="kpi-item">
                  <div class="kpi-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
                    <el-icon><ShoppingCart /></el-icon>
                  </div>
                  <div class="kpi-content">
                    <div class="kpi-label">累计销量</div>
                    <div class="kpi-value">{{ totalSales }}</div>
                    <div class="kpi-change">
                      本月: {{ monthlySales }}件
                    </div>
                  </div>
                </div>
              </div>

              <div class="strategy-stats">
                <h4>策略效果</h4>
                <div class="stat-item">
                  <span>平均价格</span>
                  <span class="value">${{ averagePrice }}</span>
                </div>
                <div class="stat-item">
                  <span>平均加成率</span>
                  <span class="value">{{ averageMarkup }}%</span>
                </div>
                <div class="stat-item">
                  <span>价格调整次数</span>
                  <span class="value">{{ priceChanges }}次</span>
                </div>
              </div>

              <div class="milestone-section">
                <h4>🏆 成就进度</h4>
                <div class="milestone-list">
                  <div 
                    v-for="milestone in milestones" 
                    :key="milestone.id"
                    class="milestone-item"
                    :class="{ achieved: milestone.achieved }"
                  >
                    <el-icon>
                      <component :is="milestone.achieved ? 'CircleCheck' : 'CircleClose'" />
                    </el-icon>
                    <span>{{ milestone.name }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon" :class="finalGrade"><Trophy /></el-icon>
          <h2>模拟结束！</h2>
          <div class="final-grade" :class="finalGrade">{{ gradeTitle }}</div>
          <p class="grade-description">{{ gradeDescription }}</p>

          <div class="final-stats-grid">
            <div class="stat-card">
              <el-icon><Money /></el-icon>
              <div class="stat-label">总利润</div>
              <div class="stat-value">${{ totalProfit }}K</div>
            </div>
            <div class="stat-card">
              <el-icon><TrendCharts /></el-icon>
              <div class="stat-label">最终市场份额</div>
              <div class="stat-value">{{ marketShare }}%</div>
            </div>
            <div class="stat-card">
              <el-icon><ShoppingCart /></el-icon>
              <div class="stat-label">总销量</div>
              <div class="stat-value">{{ totalSales }}</div>
            </div>
            <div class="stat-card">
              <el-icon><Star /></el-icon>
              <div class="stat-label">综合评分</div>
              <div class="stat-value highlight">{{ overallScore }}</div>
            </div>
          </div>

          <div class="performance-summary">
            <h3>📊 表现总结</h3>
            <div class="summary-grid">
              <div class="summary-item">
                <h4>定价策略</h4>
                <p>{{ getPricingStrategyAnalysis() }}</p>
              </div>
              <div class="summary-item">
                <h4>市场竞争</h4>
                <p>{{ getMarketCompetitionAnalysis() }}</p>
              </div>
              <div class="summary-item">
                <h4>利润管理</h4>
                <p>{{ getProfitManagementAnalysis() }}</p>
              </div>
              <div class="summary-item">
                <h4>改进建议</h4>
                <p>{{ getImprovementSuggestions() }}</p>
              </div>
            </div>
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">再玩一次</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft, PriceTag, CaretRight, Money, TrendCharts, ShoppingCart,
  Star, Trophy, CircleCheck, CircleClose, TrendCharts as TrendIcon,
  Aim, Discount, Warning
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏状态
const gameStatus = ref('ready')
const currentMonth = ref(1)
const totalMonths = ref(12)

// 定价相关
const currentPrice = ref(100)
const selectedStrategy = ref(null)

// 市场状态
const marketDemand = ref('旺盛')
const competitionLevel = ref(60)
const priceSensitivity = ref(70)
const marketShare = ref(20)
const marketRank = ref(3)

// 成本信息
const unitCost = ref(60)
const fixedCost = ref(50)
const minPrice = computed(() => Math.ceil(unitCost.value * 1.1))

// 竞争对手
const competitors = ref([
  { name: '竞争对手A', price: 95, share: 25 },
  { name: '竞争对手B', price: 110, share: 30 },
  { name: '竞争对手C', price: 120, share: 25 }
])

const marketAvgPrice = computed(() => {
  const total = competitors.value.reduce((sum, c) => sum + c.price, 0)
  return Math.round(total / competitors.value.length)
})

// 业绩数据
const totalProfit = ref(0)
const monthlyProfit = ref(0)
const totalSales = ref(0)
const monthlySales = ref(0)
const priceHistory = ref([])
const priceChanges = ref(0)

// 当前事件
const currentEvent = ref({
  title: '市场平稳',
  description: '当前市场环境正常，可以按照常规策略定价',
  type: 'info'
})

// 定价策略
const pricingStrategies = computed(() => [
  {
    name: '成本加成',
    description: '基于成本加30%利润',
    icon: 'Money',
    price: Math.round(unitCost.value * 1.3)
  },
  {
    name: '竞争跟随',
    description: '跟随市场平均价格',
    icon: 'TrendIcon',
    price: marketAvgPrice.value
  },
  {
    name: '渗透定价',
    description: '低价抢占市场',
    icon: 'Discount',
    price: Math.round(unitCost.value * 1.15)
  },
  {
    name: '撇脂定价',
    description: '高价定位优质市场',
    icon: 'Star',
    price: Math.round(marketAvgPrice.value * 1.2)
  }
])

// 预测数据
const predictedSales = computed(() => {
  const baseVolume = 1000
  const priceImpact = (marketAvgPrice.value - currentPrice.value) * 10
  const demandFactor = marketDemand.value === '旺盛' ? 1.2 : marketDemand.value === '低迷' ? 0.8 : 1
  return Math.max(100, Math.round((baseVolume + priceImpact) * demandFactor))
})

const predictedRevenue = computed(() => {
  return Math.round(predictedSales.value * currentPrice.value / 1000)
})

const predictedProfit = computed(() => {
  const revenue = predictedRevenue.value
  const variableCost = predictedSales.value * unitCost.value / 1000
  const profit = revenue - variableCost - fixedCost.value
  return Math.round(profit)
})

const predictedShareChange = computed(() => {
  if (currentPrice.value < marketAvgPrice.value * 0.9) return 3
  if (currentPrice.value < marketAvgPrice.value) return 1
  if (currentPrice.value > marketAvgPrice.value * 1.1) return -2
  return 0
})

const averagePrice = computed(() => {
  if (priceHistory.value.length === 0) return 0
  const sum = priceHistory.value.reduce((s, h) => s + h.price, 0)
  return Math.round(sum / priceHistory.value.length)
})

const averageMarkup = computed(() => {
  if (averagePrice.value === 0) return 0
  return Math.round((averagePrice.value - unitCost.value) / unitCost.value * 100)
})

const overallScore = computed(() => {
  const profitScore = Math.min(100, (totalProfit.value / 500) * 100)
  const shareScore = marketShare.value * 2
  const stabilityScore = 100 - (priceChanges.value * 5)
  return Math.round((profitScore + shareScore + stabilityScore) / 3)
})

const finalGrade = computed(() => {
  if (overallScore.value >= 85) return 'S'
  if (overallScore.value >= 70) return 'A'
  if (overallScore.value >= 55) return 'B'
  return 'C'
})

const gradeTitle = computed(() => {
  const titles = {
    S: '定价大师',
    A: '定价专家',
    B: '定价能手',
    C: '新手定价师'
  }
  return titles[finalGrade.value]
})

const gradeDescription = computed(() => {
  const descriptions = {
    S: '卓越！你完美平衡了价格、销量和利润！',
    A: '优秀！你的定价策略很有效！',
    B: '良好！继续提升定价技巧！',
    C: '需要改进！多学习定价理论！'
  }
  return descriptions[finalGrade.value]
})

// 成就
const milestones = ref([
  { id: 1, name: '首月盈利', achieved: false },
  { id: 2, name: '市场份额达25%', achieved: false },
  { id: 3, name: '单月利润超100K', achieved: false },
  { id: 4, name: '连续3月盈利', achieved: false },
  { id: 5, name: '总利润超500K', achieved: false }
])

// 监听价格变化
watch(currentPrice, (newVal, oldVal) => {
  if (oldVal !== 100 && newVal !== oldVal) {
    // 价格变化
  }
})

const getDemandType = () => {
  if (marketDemand.value === '旺盛') return 'success'
  if (marketDemand.value === '低迷') return 'danger'
  return 'warning'
}

const getCompetitionColor = () => {
  if (competitionLevel.value >= 70) return '#f56c6c'
  if (competitionLevel.value >= 40) return '#e6a23c'
  return '#67c23a'
}

const getPricePositionType = (price) => {
  if (price < marketAvgPrice.value * 0.9) return 'success'
  if (price > marketAvgPrice.value * 1.1) return 'danger'
  return 'warning'
}

const getPricePosition = () => {
  if (currentPrice.value < marketAvgPrice.value * 0.9) return '低价定位'
  if (currentPrice.value > marketAvgPrice.value * 1.1) return '高价定位'
  return '中等定位'
}

const getMarkupClass = () => {
  const markup = (currentPrice.value - unitCost.value) / unitCost.value * 100
  if (markup < 20) return 'negative'
  if (markup > 50) return 'positive'
  return ''
}

const getCompetitivenessClass = () => {
  if (currentPrice.value < marketAvgPrice.value) return 'positive'
  if (currentPrice.value > marketAvgPrice.value * 1.1) return 'negative'
  return ''
}

const startGame = () => {
  gameStatus.value = 'playing'
  currentMonth.value = 1
  totalProfit.value = 0
  totalSales.value = 0
  priceHistory.value = []
  priceChanges.value = 0
  marketShare.value = 20
  currentPrice.value = 100
  generateMonthEvent()
  ElMessage.success('游戏开始！制定你的定价策略吧！')
}

const generateMonthEvent = () => {
  const events = [
    { title: '市场平稳', description: '当前市场环境正常', type: 'info' },
    { title: '需求旺盛', description: '季节性因素导致需求大增', type: 'success', demandChange: '旺盛' },
    { title: '竞争加剧', description: '新竞争对手进入市场', type: 'warning', competitionChange: 80 },
    { title: '成本上涨', description: '原材料价格上涨10%', type: 'danger', costChange: 1.1 },
    { title: '需求低迷', description: '经济下行导致需求减少', type: 'warning', demandChange: '低迷' }
  ]
  
  const event = events[Math.floor(Math.random() * events.length)]
  currentEvent.value = event
  
  if (event.demandChange) marketDemand.value = event.demandChange
  if (event.competitionChange) competitionLevel.value = event.competitionChange
  if (event.costChange) unitCost.value = Math.round(unitCost.value * event.costChange)
}

const applyStrategy = (strategy) => {
  selectedStrategy.value = strategy.name
  currentPrice.value = strategy.price
  ElMessage.success(`已应用${strategy.name}策略`)
}

const confirmPrice = () => {
  // 计算结果
  const sales = predictedSales.value
  const profit = predictedProfit.value
  
  monthlyProfit.value = profit
  monthlySales.value = sales
  totalProfit.value += profit
  totalSales.value += sales
  
  // 更新市场份额
  const shareChange = predictedShareChange.value
  marketShare.value = Math.max(5, Math.min(45, marketShare.value + shareChange))
  
  // 记录历史
  priceHistory.value.push({
    month: currentMonth.value,
    price: currentPrice.value,
    sales: sales,
    profit: profit,
    share: marketShare.value
  })
  
  if (currentMonth.value > 1 && Math.abs(currentPrice.value - priceHistory.value[priceHistory.value.length - 2].price) > 5) {
    priceChanges.value++
  }
  
  // 更新排名
  updateMarketRank()
  
  // 检查成就
  checkMilestones()
  
  // 竞争对手调整价格
  updateCompetitors()
  
  ElMessage.success(`第${currentMonth.value}月结算完成！利润: $${profit}K`)
  
  // 下一个月
  if (currentMonth.value < totalMonths.value) {
    setTimeout(() => {
      currentMonth.value++
      generateMonthEvent()
    }, 1500)
  } else {
    setTimeout(() => {
      gameStatus.value = 'finished'
      ElMessage.success('12个月模拟结束！查看你的成绩！')
    }, 1500)
  }
}

const updateMarketRank = () => {
  const allShares = [marketShare.value, ...competitors.value.map(c => c.share)]
  allShares.sort((a, b) => b - a)
  marketRank.value = allShares.indexOf(marketShare.value) + 1
}

const updateCompetitors = () => {
  competitors.value.forEach(c => {
    const change = Math.random() * 10 - 5
    c.price = Math.max(minPrice.value, Math.round(c.price + change))
    c.share = Math.max(10, Math.min(35, c.share + Math.random() * 4 - 2))
  })
}

const checkMilestones = () => {
  if (monthlyProfit.value > 0 && currentMonth.value === 1) {
    milestones.value[0].achieved = true
  }
  if (marketShare.value >= 25) {
    milestones.value[1].achieved = true
  }
  if (monthlyProfit.value >= 100) {
    milestones.value[2].achieved = true
  }
  if (priceHistory.value.length >= 3) {
    const lastThree = priceHistory.value.slice(-3)
    if (lastThree.every(h => h.profit > 0)) {
      milestones.value[3].achieved = true
    }
  }
  if (totalProfit.value >= 500) {
    milestones.value[4].achieved = true
  }
}

const showMarketResearch = () => {
  ElMessageBox.alert(
    `市场调研显示：\n- 客户愿意为优质产品支付$${Math.round(marketAvgPrice.value * 1.15)}\n- 价格敏感客户占比${priceSensitivity.value}%\n- 竞争对手平均价格$${marketAvgPrice.value}`,
    '市场调研报告',
    { type: 'info' }
  )
}

const getPricingStrategyAnalysis = () => {
  if (averagePrice.value < marketAvgPrice.value * 0.9) {
    return '你采用了低价渗透策略，成功抢占了市场份额'
  } else if (averagePrice.value > marketAvgPrice.value * 1.1) {
    return '你采用了高价策略，定位高端市场'
  }
  return '你采用了跟随策略，保持稳健发展'
}

const getMarketCompetitionAnalysis = () => {
  if (marketRank.value === 1) {
    return '恭喜！你成为市场领导者'
  } else if (marketRank.value === 2) {
    return '你是强有力的市场挑战者'
  }
  return '你需要提升市场竞争力'
}

const getProfitManagementAnalysis = () => {
  if (totalProfit.value >= 600) {
    return '利润管理出色，实现了利润最大化'
  } else if (totalProfit.value >= 300) {
    return '利润管理良好，保持了盈利能力'
  }
  return '利润管理有待提升，注意成本控制'
}

const getImprovementSuggestions = () => {
  const suggestions = []
  if (averageMarkup.value < 25) {
    suggestions.push('提高利润率')
  }
  if (priceChanges.value > 5) {
    suggestions.push('保持价格稳定性')
  }
  if (marketShare.value < 20) {
    suggestions.push('扩大市场份额')
  }
  return suggestions.length > 0 ? suggestions.join('、') : '继续保持！'
}

const restartGame = () => {
  gameStatus.value = 'ready'
  milestones.value.forEach(m => m.achieved = false)
}

const goBack = () => {
  router.push('/learning/games')
}
</script>

<style scoped>
.pricing-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 1000px;
  text-align: center;
}

.start-icon {
  font-size: 80px;
  color: #f59e0b;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.game-rules h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

.rules-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rule-section {
  background: white;
  padding: 15px;
  border-radius: 8px;
}

.rule-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #409eff;
}

.rule-section ul {
  margin: 0;
  padding-left: 20px;
}

.rule-section li {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* 游戏进行中 */
.market-info h3,
.pricing-decision h3,
.performance-panel h3 {
  margin: 0;
  font-size: 16px;
}

.info-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.info-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.info-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #409eff;
}

.market-status .status-item {
  margin-bottom: 12px;
}

.status-item .label {
  display: block;
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
}

.status-item .value {
  margin-left: 10px;
  font-weight: bold;
}

.competitors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.competitor-item {
  background: #f5f7fa;
  padding: 10px;
  border-radius: 6px;
}

.competitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.competitor-header .name {
  font-weight: bold;
  font-size: 13px;
}

.competitor-info {
  font-size: 12px;
  color: #909399;
}

.cost-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.cost-item .value {
  font-weight: bold;
  color: #303133;
}

.cost-item .value.highlight {
  color: #f56c6c;
  font-size: 14px;
}

.history-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 120px;
  background: #f5f7fa;
  padding: 10px;
  border-radius: 6px;
}

.history-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  position: relative;
}

.bar-label {
  font-size: 11px;
  color: #909399;
  margin-bottom: 5px;
}

.bar-fill {
  width: 100%;
  background: #67c23a;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
  margin-top: auto;
}

.bar-value {
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  bottom: 0;
}

.current-situation {
  margin-bottom: 20px;
}

.pricing-form h4 {
  margin: 20px 0 15px 0;
  font-size: 15px;
}

.price-input-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.price-input {
  width: 200px;
}

.price-unit {
  font-size: 16px;
  font-weight: bold;
}

.price-analysis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  background: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.analysis-item {
  text-align: center;
}

.analysis-item .label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
}

.analysis-item .value {
  font-size: 18px;
  font-weight: bold;
}

.analysis-item .value.positive {
  color: #67c23a;
}

.analysis-item .value.negative {
  color: #f56c6c;
}

.strategy-suggestions {
  margin-bottom: 20px;
}

.suggestion-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.strategy-card {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.strategy-card:hover {
  background: #ecf5ff;
  border-color: #409eff;
}

.strategy-card.selected {
  background: #ecf5ff;
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.strategy-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.strategy-header .el-icon {
  color: #409eff;
}

.strategy-card p {
  margin: 5px 0;
  font-size: 12px;
  color: #606266;
}

.strategy-price {
  font-size: 13px;
  color: #303133;
  margin-top: 5px;
}

.strategy-price strong {
  color: #409eff;
  font-size: 16px;
}

.prediction {
  background: #f0f9ff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.prediction h4 {
  margin: 0 0 15px 0 !important;
  color: #409eff;
}

.prediction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.prediction-item {
  text-align: center;
}

.prediction-label {
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
}

.prediction-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.prediction-value.positive {
  color: #67c23a;
}

.prediction-value.negative {
  color: #f56c6c;
}

.action-buttons {
  text-align: center;
  margin-top: 20px;
}

.kpi-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.kpi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.kpi-content {
  flex: 1;
}

.kpi-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 3px;
}

.kpi-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 3px;
}

.kpi-change {
  font-size: 12px;
}

.kpi-change.positive {
  color: #67c23a;
}

.kpi-change.negative {
  color: #f56c6c;
}

.strategy-stats {
  margin-bottom: 20px;
}

.strategy-stats h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #409eff;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.stat-item .value {
  font-weight: bold;
}

.milestone-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #409eff;
}

.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #909399;
}

.milestone-item.achieved {
  color: #67c23a;
}

.milestone-item .el-icon {
  font-size: 16px;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 1000px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.S {
  color: #f59e0b;
  animation: bounce 1s infinite;
}

.finish-icon.A {
  color: #3b82f6;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.finish-card h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
}

.final-grade {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.final-grade.S {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.final-grade.A {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.grade-description {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stat-card .el-icon {
  font-size: 32px;
}

.stat-label {
  font-size: 13px;
  opacity: 0.9;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-value.highlight {
  font-size: 32px;
}

.performance-summary {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: left;
}

.performance-summary h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.summary-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.summary-item h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #409eff;
}

.summary-item p {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

@media (max-width: 1400px) {
  .rules-content {
    grid-template-columns: 1fr;
  }
  
  .final-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

